'use strict';

import {
    StyleSheet,
    View,
    TouchableOpacity,
    Navigator,
    ScrollView,
    NavigatorIOS,
    Text,
    AsyncStorage,
    TouchableHighlight
} from 'react-native';
import React from 'react';
import Icon from 'react-native-vector-icons/Ionicons';
import URL from '../config/server';
import {Utils} from '../config/utils';
import {Key} from '../config/key';

const NavigationBarRouteMapper = {
    LeftButton(route, navigator, index, navState) {
        return (
            <TouchableOpacity style={{flex: 1, justifyContent: 'center'}}
                              onPress={() => navigator.parentNavigator.pop()}>
                <View style={{flexDirection:'row',padding:5}}>
                    <Icon name="ios-arrow-back" size={18} color="#ffffff" style={{alignSelf:'center'}}/>
                    <Text style={{color: 'white', margin: 3,fontSize:16}}>
                        返回
                    </Text>
                </View>
            </TouchableOpacity>
        );
    },
    RightButton(route, navigator, index, navState) {
        return null;
    },
    Title(route, navigator, index, navState) {
        return (
            <Text style={{color: 'white', margin: 10, fontSize: 20}}>
                账号管理
            </Text>
        );
    }
};

export default class Setting extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            username: '游客',
            existUser: false,
            deadLine: '',
            level:null
        };
    }

    componentWillMount() {
        let that = this;
        AsyncStorage.getItem("username", (err, val)=> {
            if (val != null) {
                that.setState({
                    username: val,
                    existUser: true
                })
            }
        });
        this._getLevel(Key.username);
        this._getEndTime();
    }
    _getLevel(name){
        const GETLEVE=URL.local+'useroption/usertype?username='+name;
        let that = this;
        Utils.get(GETLEVE, function (result) {
            var levelName = '';
            switch(result){
                case 0:
                    levelName='每日涨停';
                    break;
                case 1:
                    levelName='初级内参';
                    break;
                case 2:
                    levelName='个人内参';
                    break;
                case 3:
                    levelName='白金内参';
                    break;
                case 4:
                    levelName='私密内参';
                    break;
                case 5:
                    levelName='神秘内参';
                    break;
                default:
                    levelName='';
            }
            that.setState({
                level:levelName
            })
        })
    }
    _getEndTime() {
        const ENDTIME = URL.local + 'endtime';
        let that = this;
        Utils.transport1(ENDTIME, '', function (data) {
            that.setState({deadLine: data})
        })
    }

    _clearUser() {
        var navigator = this.props.navigator;

        if (AsyncStorage.getAllKeys()) {
            Key.username = '';
            AsyncStorage.clear();
            navigator.replace({
                id: 'LoginPage',
                name: 'LoginPage',
                message: '神秘涨停'
            })
        } else {
            console.log("Nothing left!")
        }
    }

    _changepwd() {
        this.props.navigator.replace({
            id: 'ChangePwd',
            message: '修改密码'
        })
    }

    _login() {
        this.props.navigator.replace({
            id: 'LoginPage',
            name: '登陆',
            message: '神秘涨停'
        })
    }

    renderScene() {
        return (
            <ScrollView
                style={styles.container}>
                <View style={styles.buttons}>

                     <View style={[styles.button,{borderBottomWidth:2,borderColor:'#f5f5f9'}]}>
                        <Text style={styles.buttonText}>
                            用户名:{this.state.username}
                        </Text>

                    </View>
                    <View style={[styles.button,{borderBottomWidth:2,borderColor:'#f5f5f9'}]}>
                        <Text style={styles.buttonText}>
                            用户级别:{this.state.level}
                        </Text>

                    </View>
                   
                    <View style={[styles.button,{borderBottomWidth:2,borderColor:'#f5f5f9'}]}>
                        <Text style={styles.buttonText}>
                            到期时间:{'\t'}{this.state.deadLine}
                        </Text>
                    </View>
                    {this.state.existUser ? null :
                        <TouchableHighlight onPress={this._login.bind(this)} underlayColor='#ffffff'>
                            <View style={[styles.button,{borderBottomWidth:2,borderColor:'#f5f5f9'}]}>
                                <Text style={styles.buttonText}>
                                    去登陆
                                </Text>
                                <Icon name="ios-arrow-forward" size={18} style={styles.in} color="#000000"/>
                            </View>
                        </TouchableHighlight>}
                    {this.state.existUser ?
                        <TouchableHighlight onPress={this._changepwd.bind(this)} underlayColor='#ffffff'>
                            <View style={[styles.button,{borderBottomWidth:2,borderColor:'#f5f5f9'}]}>
                                <Text style={styles.buttonText}>
                                    修改密码
                                </Text>
                                <Icon name="ios-arrow-forward" size={18} style={styles.in} color="#000000"/>
                            </View>
                        </TouchableHighlight> : null}
                    {this.state.existUser ?
                        <TouchableHighlight onPress={this._clearUser.bind(this)} underlayColor='#ffffff'>
                            <View style={styles.button}>
                                <Text style={styles.buttonText}>
                                    退出当前用户
                                </Text>
                                <Icon name="ios-arrow-forward" size={18} style={styles.in} color="#000000"/>
                            </View>
                        </TouchableHighlight> : null}
                </View>
            </ScrollView>
        );
    }

    render() {
        return (
            <Navigator
                renderScene={this.renderScene.bind(this)}
                navigator={this.props.navigator}
                navigationBar={
            <Navigator.NavigationBar 
                style={{backgroundColor: '#e02820', alignItems: 'center'}}
                routeMapper={NavigationBarRouteMapper} />
          }/>
        );
    }
}

const styles = StyleSheet.create({
    nav: {
        flex: 1
    },
    container: {
        flex: 1,
        paddingTop: 50,
        backgroundColor: '#f5f5f9'
    },
    buttons: {
        top: 50,
        flex: 1,
        height: 80
    },
    button: {
        backgroundColor: '#ffffff',
        flex: 1,
        height: 40,
        paddingLeft: 30,
        flexDirection: 'row'
    },
    username: {
        backgroundColor: '#ffffff',
        flex: 1,
        height: 40,
        paddingLeft: 30,
        flexDirection: 'row',
        paddingTop: 20,
        paddingBottom: 20,
        borderBottomWidth: 2,
        borderColor: '#f5f5f9'
    },
    buttonText: {
        fontSize: 17,
        fontWeight: '600',
        textAlign: 'left',
        flex: 1,
        alignSelf: 'center'
    },
    in: {
        flex: 1,
        textAlign: 'right',
        alignSelf: 'center',
        fontSize: 18,
        paddingRight: 30,
        fontWeight: '700'
    },
    left: {
        flex: 1,
        textAlign: 'left',
        alignSelf: 'center',
        fontSize: 18,
        paddingRight: 30,
        fontWeight: '700'
    }
});


